<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, watch, computed, inject } from 'vue';
import TimeLine from '../../../components/timeLine.vue';
import empty from '@/assets/img/empty.png'
import { useStore } from 'vuex'
const store = useStore()
const api = store.state.api
// 跳转房间
const jumpRoom = inject('methods').jumpInterRoom
let total = ref([])
let today = ref(0)
let currDay = ref(0)
const props = defineProps({
    index: Number
})
let index = props.index
watch(() => props.index, (newVal) => {
    index = newVal
    // console.log(index);
    getTime()
})
// PK时间线
const getTime = async () => {
    let timeUrl
    if (index == 0) timeUrl = api.get1time()
    else timeUrl = api.get2time()
    await timeUrl.then(res => {
        // res = {
        //     data: {
        //         "errcode": 0,
        //         "result": [
        //             {
        //                 "cycle": 0,
        //                 "index": 0,
        //                 "open": true,
        //                 "time": "15:50"
        //             },
        //             {
        //                 "cycle": 0,
        //                 "index": 1,
        //                 "open": true,
        //                 "time": "15:50"
        //             }
        //         ],
        //         "errmsg": "",
        //         "status": 200
        //     }
        // }
        let data = res.data.result
        if (data) {
            total.value = []
            data.forEach((item, i) => {
                total.value.push(item.time)
                if (item.open) {
                    // console.log(item.index);
                    currDay.value = today.value = item.index
                }
            });
            getRankList()
        }
    })
}
// PK对战表
let rankList = reactive({
    result: []
})
const getRankList = async () => {
    let timeUrl
    if (index == 0) timeUrl = api.get1config
    else timeUrl = api.get2config
    await timeUrl({ index: currDay.value }).then(res => {
        // res = {
        //     data: {
        //         "errcode": 0,
        //         "result": [
        //             {
        //                 "anchorId1": 361675,
        //                 "anchorId2": 369657,
        //                 "anchorName1": "1号主播",
        //                 "anchorName2": "主播主播主播主播主播",
        //                 "anchorPic1": "http://qiqi-resource.qxiu.com/op/2018/01/12/95be0632928b41968691878801bf7299.jpg@style@s640",
        //                 "anchorPic2": "http://qiqi-resource.qxiu.com/op/2018/07/17/7cc99ad14614481297e240746744b86d.jpg",
        //                 "enough1": false,
        //                 "enough2": false,
        //                 "pkTickets1": 0,
        //                 "pkTickets2": 0,
        //                 "roomId1": 200001,
        //                 "roomId2": 200005,
        //                 "score1": 10,
        //                 "score2": 20,
        //                 "showtype1": 1,
        //                 "showtype2": 1,
        //                 "state1": 2,
        //                 "state2": 1,
        //                 "type1": -1,
        //                 "type2": -1,
        //                 "pointChange1": 100,
        //                 "pointChange2": 0,
        //                 "win": 0
        //             }
        //         ],
        //         "errmsg": "",
        //         "status": 200
        //     }
        // }
        if (res.data.result) {
            rankList.result = res.data.result
        }else{
            rankList.result = []
        }
    })
}
const rank = computed(() => {
    return rankList.result
})
const getList = (val) => {
    currDay.value = val
    // console.log(currDay.value);
    getRankList()
}
let timer
onMounted(() => {
    getTime()
    timer = setInterval(() => {
        getRankList()
    }, 30 * 1000);
})
onBeforeUnmount(() => {
    clearInterval(timer)
})
const getNum = (num)=>{
    let a =num/10000
    let b =Math.floor(a*100)/100
    let c =b%10
    let d = b
    if(c>0) d= b.toFixed(2)
    // console.log(d);
    // console.log(num<=99999999?num:(Math.floor(a*100)/100).toFixed(2)+'W');
    return num<=10000000?num:d+'W'
}
// getNum(19999999)
// getNum(10000001)
</script>

<template>
    <div class="pkRace">
        <TimeLine v-if="total.length > 0" :total="total" :today="today" :curr-day="currDay" @change="getList" />
        <ul class="raceListBox">
            <li v-for="(item, index) in rank" :key="index" v-if="rank.length > 0">
                <div class="infoBox">
                    <div class="info">
                        <img v-if="item.state1 == 2" class="headImg toRoom"
                            @click="jumpRoom(item.state1, item.roomId1, item.showtype1)" :src="item.anchorPic1 || empty"
                            alt="">
                        <img v-else class="headImg" :src="item.anchorPic1 || empty" alt="">
                        <img v-if="item.state1 == 2" class="online" src="@/assets/img/ceremony/online.gif" alt="">
                        <i class="win" v-if="item.win == 1" />
                        <p>
                            <span class="name">{{ item.anchorName1 }}</span>
                            <span>ID:{{ item.anchorId1 }}</span>
                        </p>
                    </div>
                    <p class="tickets"><span>本局PK票&nbsp;</span><span>{{ getNum(item.pkTickets1) }}</span></p>
                    <p class="isDone" v-if="item.win!=0" :class="{ active: item.enough1 }">PK票数{{ item.enough1 ? '已' : '未' }}达标</p>
                    <!-- <p class="isDone active">PK票数已达标</p> -->
                    <p class="lastScore" :class="{ active: item.pointChange1 < 0 }">已{{ item.pointChange1 >=
                        0 ? '夺取' : '扣除' }}{{ Math.abs(item.pointChange1) }}决战分</p>
                </div>
                <p class="pk">{{ item.score1 + ':' + item.score2 }}</p>
                <div class="infoBox">
                    <div class="info info2">
                        <img v-if="item.state2 == 2" class="headImg toRoom"
                            @click="jumpRoom(item.state2, item.roomId2, item.showtype2)" :src="item.anchorPic2 || empty"
                            alt="">
                        <img v-else class="headImg" :src="item.anchorPic2 || empty" alt="">
                        <img v-if="item.state2 == 2" class="online" src="@/assets/img/ceremony/online.gif" alt="">
                        <i class="win win2" v-if="item.win == 2" />
                        <p>
                            <span class="name">{{ item.anchorName2 }}</span>
                            <span>ID:{{ item.anchorId2 }}</span>
                        </p>
                    </div>
                    <p class="tickets tickets2"><span>本局PK票&nbsp;</span><span>{{getNum(item.pkTickets2) }}</span></p>
                    <p class="isDone isDone2"  v-if="item.win!=0" :class="{ active: item.enough2 }">PK票数{{ item.enough2 ? '已' : '未' }}达标</p>
                    <p class="lastScore lastScore2" :class="{ active: item.pointChange2 < 0 }">已{{ item.pointChange2 >=
                        0 ? '夺取' : '扣除' }}{{ Math.abs(item.pointChange2) }}决战分</p>
                </div>
            </li>
            <li class="pkNoData" v-else></li>
        </ul>
    </div>
</template>

<style lang='scss' scoped></style>